<template>
  <div class="news-card-box">
    <div class="news-card">
      <v-card
        class="wrapper"
        max-width="18rem"
      >
        <v-img
          :src="formData.imageUrl"
          class="white--text align-end"
          width="100%"
          height="12em"
        >
          <v-card-title>
            <div>
              <span class="date">
                Top {{ index }}
              </span>
            </div>
            <div v-if="video" style="margin-top: auto; margin-left: auto;">
              <router-link :to="'/video?src=' + encodeData(formData)" target="_blank">
                <v-btn small fab rounded plain>
                  <div style="font-size:40px;">
                    <i class="el-icon-video-play"/>
                  </div>
                </v-btn>
              </router-link>
            </div>
          </v-card-title>
        </v-img>

        <v-card-subtitle class="star">
          <a> <svg-icon icon-class="star"/> {{ formData.hotValue + formData.hotValueUnit }}</a>
        </v-card-subtitle>

        <v-card-text class="text--primary title">
          <div style="height: 3rem">
            <span
              class="main"
              style="overflow:hidden;
                  text-overflow:ellipsis;
                  display:-webkit-box;
                  -webkit-box-orient:vertical;
                  -webkit-line-clamp:2; ">
              <a :href="formData.url" target="_blank">  {{ formData.title }} </a>
            </span>
          </div>
          <v-divider
            style="margin: auto"
            inset
          />
          <div style="height: 2rem">
            <span
              class="text--secondary overflow-hidden"
              style="overflow:hidden;
                  text-overflow:ellipsis;
                  display:-webkit-box;
                  -webkit-box-orient:vertical;
                  -webkit-line-clamp:2; ">
              {{ formData.describe }}
            </span>
          </div>
        </v-card-text>
      </v-card>
    </div>
  </div>

</template>

<script>

export default {
  name: 'NewsCard',
  components: {
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    formData: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    video: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
  }),
  computed: {

  },
  methods: {
    click() {
      console.log('-------------------------------------------------------------------------')
      if (this.video) {
        console.log('-----------------------------' + this.formData.videoUrl + '--------------------------------------------')
        this.$emit('click', this.formData.videoUrl)
      }
    },
    encodeData(data) {
      return window.btoa(encodeURI(JSON.stringify(data)))
    }
  }
}
</script>

<style scoped lang="scss">

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
// Variables
$regal-blue: #034378;
$san-juan: #2d4e68;
$bermuda: #77d7b9;
$white: #fff;
$black: #000;
$open-sans: 'Open Sans', sans-serif;

// clear-fix mixin
@mixin cf {
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}

a {
  text-decoration: none;
}

h3 {
  font-family: $open-sans;
  font-weight: 300;
}

.news-card-box {
  display: flex;
  //align-items: center;
  width: 95%;
  overflow: auto;
  //background-color: rgba(16 18 27 / 10%);
  padding: 20px 40px;
  font-family: $open-sans;

  .news-card{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 1.6em;
    width: 100%;
  }

  .star {
    margin-top: 0.1rem;
  }

  .title {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    //padding: 1rem 2.2rem;
  }
  .title {
    a {
      color: lighten($black, 45%);
    }
    .main {
      font-weight: 700;
      font-size: 1.2rem;
    }
  }

  @media screen and (max-width: 945px) {
    padding: 20px;
  }

}

.date {
  border-bottom-right-radius: 1.6rem;
  position: absolute;
  top: 0;
  left: 0;
  background-color: $bermuda;
  color: $white;
  padding: 0.8em;
  span {
    display: block;
    text-align: center;
  }
  .day {
    font-weight: 700;
    font-size: 24px;
    text-shadow: 2px 3px 2px rgba($black, 0.18);
  }
  .month {
    text-transform: uppercase;
  }
  .month,
  .year {
    font-size: 14px;
  }
}

// 公共样式
.card {
  //float: left;
  padding: 0px 20px;
  margin: 10px 0;
  width: 50%;

  @media screen and (max-width: 670px) {
    width: 100%;
  }

  .menu-content {
    @include cf;
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      display: inline-block;
    }
    a {
      color: $white;
    }
    span {
      position: absolute;
      left: 50%;
      top: 0;
      font-size: 10px;
      font-weight: 700;
      font-family: 'Open Sans';
      transform: translate(-50%, 0);
    }
  }
  .wrapper {
    background-color: $white;
    height: 380px;
    width: 380px;
    position: relative;
    overflow: hidden;
    border-radius: 1.6em;
    box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.2);
    &:hover {
      .data {
        transform: translateY(0);
      }
    }
  }
  .data {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(100px + 1em));
    transition: transform 0.3s;
    .content {
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      padding: 1em;
      position: relative;
      z-index: 1;
    }
  }
  .author {
    font-size: 12px;
  }

  .text {
    height: 100px;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    color: #777777;

  }
  input[type='checkbox'] {
    display: none;
  }
  input[type='checkbox']:checked + .menu-content {
    transform: translateY(-60px);
  }
}

.wrapper {
  border-radius: 1.6rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  //background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx2.sinaimg.cn%2Forj480%2F68118f3agy1h5264a0ecxj20u0141ald.jpg&refer=http%3A%2F%2Fwx2.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662890137&t=7ee2d46a61b19e72b430dd0b430ea249) 20% 1% / cover no-repeat;
}
.video {
  position: absolute;
  top: 0;
  right: 0;
  color: $white;
  padding: 0.8em;
  span {
    display: block;
    text-align: center;
  }
}
.content {
  background-color: $white;
  box-shadow: 0 5px 30px 10px rgba($black, 0.3);

}

.menu-button {
  position: absolute;
  z-index: 999;
  top: 16px;
  right: 16px;
  width: 25px;
  text-align: center;
  cursor: pointer;
  span {
    width: 5px;
    height: 5px;
    background-color: lighten($black, 50%);
    color: lighten($black, 50%);
    position: relative;
    display: inline-block;
    border-radius: 50%;
    &::after,
    &::before {
      content: '';
      display: block;
      width: 5px;
      height: 5px;
      background-color: currentColor;
      position: absolute;
      border-radius: 50%;
    }
    &::before {
      left: -10px;
    }
    &::after {
      right: -10px;
    }
  }
}
.menu-content {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: transform 0.3s;
  transform: translateY(0);
  li {
    width: 33.333333%;
    float: left;
    background-color: $bermuda;
    height: 60px;
    position: relative;

  }
  a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;

  }
  span {
    top: -10px;
  }
}
</style>
